import React from 'react'
import {
    Switch,
    Link,
    Route
} from 'react-router-dom'

class Topic extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let topicId = this.props.topicId;
        return (
            <li><Link to={'/topicsClass/' + topicId}>{this.props.topicName}</Link></li>
        )
    }
}

class TopicContent extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        console.log(this.props.match.params.topicId)
    }

    render() {
        return (
            <div>
                {this.props.match.params.topicId}
            </div>
        )
    }
}

class Topics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            topicList: [
                {topicName: "React Component", topicId: "1"},
                {topicName: "React Dom", topicId: "2"},
                {topicName: "React Router", topicId: "3"},
                {topicName: "React-Redux", topicId: "4"}
            ]
        }
    }

    render() {
        return (
            <div>
                <ul>{
                    this.state.topicList.map(topic => (
                        <Topic topicName={topic.topicName} topicId={topic.topicId} key={topic.topicId}/>
                    ))
                }</ul>
                <Switch>
                    <Route exact path='/topicsClass'>
                        <p>topic main page</p>
                    </Route>
                    <Route path='/topicsClass/:topicId' component={TopicContent}>
                    </Route>
                </Switch>
            </div>
        )
    }
}

export default TopicsClass
